<template>
  <div>
    <q-table
      :title="studentNumber+' '+'考勤详情'"
      style="margin-top: 20px"
      :data="studentAttendDetailTable.data"
      :columns="studentAttendDetailTable.columns"
      :filter="studentAttendDetailTable.filter"
      row-key="name"
      no-data-label="没有找到任何信息"
    >
      <!-- 自定义无数据插槽 -->
      <template v-slot:no-data="{ icon, message, filter }">
        <div class="full-width row flex-center text-primary q-gutter-sm">
          <q-icon size="2em" name="sentiment_dissatisfied"/>
          <span>
             {{ message }}
          </span>
          <q-icon size="2em" :name="filter ? 'filter_b_and_w' : icon"/>
        </div>
      </template>
    </q-table>
  </div>
</template>

<script>

export default {
  name: 'StudentAttendDetail',

  data () {
    return {
      // currentUserInfo: JSON.parse(sessionStorage.getItem('user_object')),
      studentNumber: this.$route.query.stuN,
      studentAttendDetailTable: {
        loading: false,
        filter: '',
        columns: [
          { name: 'semesterYear', label: '学年', align: 'left', field: 'semesterYear', sortable: true },
          { name: 'semesterType', label: '学期', align: 'left', field: 'semesterType', sortable: true },
          { name: 'studentNumber', label: '学号', align: 'left', field: 'studentNumber', sortable: true },
          { name: 'studentRealName', label: '姓名', align: 'left', field: 'studentRealName' },
          { name: 'studentSex', label: '性别', align: 'left', field: 'studentSex' },
          { name: 'gradeId', label: '年级', align: 'left', field: 'gradeId' },
          { name: 'collegeName', label: '学院', align: 'left', field: 'collegeName', sortable: true },
          { name: 'majorName', label: '专业', align: 'left', field: 'majorName', sortable: true },
          { name: 'className', label: '班级', align: 'left', field: 'className', sortable: true },
          { name: 'week', label: '周数', align: 'left', field: 'week', sortable: true },
          { name: 'attendanceTypeName', label: '考勤类型', align: 'left', field: 'attendanceTypeName', sortable: true },
          { name: 'attendanceStandard', label: '考勤标准', align: 'left', field: 'attendanceStandard', sortable: true },
          { name: 'attendanceTimes', label: '次数', align: 'left', field: 'attendanceTimes', sortable: true },
          { name: 'absenteeismSection', label: '总计旷课节次', align: 'left', field: 'absenteeismSection', sortable: true }
        ],
        data: []
      }

    }
  },
  mounted () {
    this.getStudentExamsDetail()
  },
  methods: {
    getStudentExamsDetail () {
      const query = {
        url: '/AttendDetailServlet',
        methods: 'get',
        params: {
          username: this.studentNumber
        }
      }
      this.$fetchData(query).then(res => {
        if (res.data !== null) {
          console.log(res)
          this.studentAttendDetailTable.data = res.data
        } else {
          this.$q.notify({
            icon: 'announcement',
            message: '获取记录为空',
            color: 'red',
            position: 'top',
            timeout: 1500
          })
        }
      }).catch(e => {
        console.log(e)
      })
    }
  }
}
</script>

<style scoped>

</style>
